@extends('layouts.head')

@section('content')
<section class="content-header" id="content-header">
权限设置
</section>

<section class="content" id="content">
<div class="box box-solid">
  <div class="box-header with-border">
    <el-button-group>
          <el-button @click="getNew" type="primary"  size="small" >刷新</el-button>
    </el-button-group> 
    <el-input  placeholder="输入关键字"  style="width: 160px" size="small" icon="search" v-model="searchWord" :on-icon-click="search">
</el-input>
  </div>
  <div class="box-body " style="min-height:768px">
         <el-table ref="multipleTable" :data="users" border bordertooltip-effect="dark" border="true" @selection-change="checkOne"   style="width: 100%;font-size: xx-small;" >
         <el-table-column type="selection" width="40">  </el-table-column>
            <el-table-column  type="index" width="40" > </el-table-column>
            <el-table-column  prop="name" label="姓名" > </el-table-column>
            <el-table-column  prop="email" label="登录帐号" > </el-table-column>
            <el-table-column  prop="created_at" label="创建时间" > </el-table-column>
            <el-table-column label="功能权限" >
                <template scope="scope">
                    <div v-for="item in rules ">
                      <a v-if="scope.row.id == item.uid"> @{{ item.name }}</a>
                    </div>
                </template>
            </el-table-column>
            <el-table-column fixed="right"  label="操作"  width="210">
              <template scope="scope">
                <el-button-group>
                    <el-button  @click="setRuleRow(scope.row.id, users)" type="success" icon="" size="mini">功能权限</el-button>
                </el-button-group>     
              </template>
            </el-table-column>
          </el-table>
          </br>
          <div class="block">
            <el-pagination @size-change=""  @current-change="getUsersCurrentPage" :current-page="usersCurrentPage" :page-size="10" layout="total, prev, pager, next, jumper" :total="usersCount">
            </el-pagination>
          </div>
  </div>
</div>


<el-dialog title="设置功能权限" :visible.sync="setRuleV"   >
  <el-checkbox-group v-model="checkList.rule">
    <el-checkbox v-for="url in urls"  :label="url.name" ></el-checkbox>
  </el-checkbox-group>
  <span slot="footer" class="dialog-footer">
    <el-button @click="setRuleV = false" size="small">取 消</el-button>
    <el-button type="primary" @click="submitSetRule" size="small">确 定 </el-button>
  </span>
</el-dialog>

</section>
<script >
    var content =new Vue({
        el:'#content',
        data:{
            date:'<?php echo date('Y-m-d') ?>',
            addUserV:false,
            lookUserV:false,
            editUserV:false,
            setRuleV:false,
            dateMore:'',
            searchWord:'',
            users:[],
            rules:[],
            urls:[],
            usersCount:1,
            usersCurrentPage:1,
            editUserItem:{_token:'',name:'',email:'',password:'',password_confirmation:'',rule:[]},
            checkList:{_token:'',rule:[]},
            multipleSelection: [],
            userSetId:'',
        },
        created:function(){      
            this.$http.get('/user/getCurrent/'+this.usersCurrentPage).then((response) => {this.users=response.data; console.log(response.data)},(response) =>{ }); 
            this.$http.get('/user/getCount').then((response) => {this.usersCount=response.data; console.log(response.data)},(response) =>{ }); 
            this.$http.get('/rules/getAll').then((response) => {this.rules=response.data; console.log('rules,success')},(response) =>{ }); 
            this.$http.get('/url/getAll').then((response) => {this.urls=response.data; console.log('urls,success')},(response) =>{ });
        },

        methods:{
              getNew:function(){
                  this.$http.get('/user/getCurrent/'+this.usersCurrentPage).then((response) => {this.users=response.data; console.log(response.data)},(response) =>{ }); 
                  this.$http.get('/user/getCount').then((response) => {this.usersCount=response.data; console.log(response.data)},(response) =>{ }); 

                  this.$http.get('/rules/getAll').then((response) => {this.rules=response.data; console.log('rules,success')},(response) =>{ });

              },
              search:function(){
                  console.log(this.searchWord);
                  this.$http.get('/user/search/'+this.searchWord).then((response) => {this.users=response.data; this.usersCount = this.users.length;console.log('word,users,success')},(response) =>{ console.log(response);}); 
                  
              } ,
              submitSetRule:function(){
                 console.log('submitSetRule');
                 this.checkList._token = '{{csrf_token()}}';
                 this.$http.post('/rules/add/'+this.userSetId,this.checkList).then((response)=>{this.$notify.success('添加成功');
                              this.$http.get('/rules/getAll').then((response) => {this.rules=response.data; console.log('rules,success')},(response) =>{ }); 

                        },(response) =>{ this.$notify.error('未知错误')}); 


                 this.setRuleV = false;
              },
              setRuleRow:function(val){
                this.userSetId=val;
                this.setRuleV=true;
              },
              getUsersCurrentPage:function(val){
                  console.log(val);
                  this.usersCurrentPage=val;
                  this.$http.get('/user/getCurrent/'+this.usersCurrentPage).then((response) => {this.users=response.data; console.log(response.data)},(response) =>{ }); 
                  this.$http.get('/user/getCount').then((response) => {this.usersCount=response.data; console.log(response.data)},(response) =>{ }); 
              },
              checkChange:function(rows){
                     if (rows) {
                        rows.forEach(row => {
                          this.$refs.multipleTable.toggleRowSelection(row);
                        });
                      } else {
                        this.$refs.multipleTable.clearSelection();
                      }
              }, 
              checkOne:function (val) {
                console.log(val);
                this.multipleSelection = val;
              } ,
         },

  });
</script>




@endsection

@section('pagejs')

@endsection

        




